<script setup>
import { formatNumber } from '@/utils/index.js'

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
  authorId: {
    type: Number,
    default: 1,
  },
})
const emit = defineEmits(['updateItem'])
const showComment = ref(false)
// 二级评论点赞
function likeReply() {
  const newItem = {
    ...props.item,
    likeCount: props.item.isLike
      ? props.item.likeCount - 1
      : props.item.likeCount + 1,
    isLike: !props.item.isLike,
  }
  emit('updateItem', newItem)
}
</script>

<template>
  <div class="flex">
    <div class="flex items-start">
      <UserPopover
        show-arrow
        :info="item.from"
        trigger="hover"
        show-button
        class="flex-col justify-end"
      >
        <el-avatar
          :src="item.from.avatar"
          alt="头像"
          class="mr-10 cursor-pointer"
        />
      </UserPopover>
    </div>
    <div class="flex-col flex-1 gap-8">
      <div class="w-full flex items-center">
        <div class="inline-block vertical-mid">
          <UserPopover show-arrow :info="item.from" trigger="hover" show-button>
            <span class="line-clamp-1 max-w-100 cursor-pointer op-text">{{
              item.from.nickName
            }}</span>
          </UserPopover>
        </div>
        <el-tag v-if="item.from.id === authorId" size="small" class="mx-5">
          作者
        </el-tag>
        <div v-if="item.reply?.id" class="flex items-center">
          <span class="line-clamp-1 max-w-100"> &nbsp;回复 &nbsp; </span>
          <UserPopover
            show-arrow
            :info="item.reply"
            trigger="hover"
            show-button
            class="flex-col justify-end"
          >
            <span class="line-clamp-1 max-w-100 cursor-pointer op-text">{{
              item.reply.nickName
            }}</span>
          </UserPopover>
          <el-tag v-if="item.reply.id === authorId" size="small" class="mx-5">
            作者
          </el-tag>
        </div>
        <span>：</span>
      </div>
      <ContentCollapse :max-line="5" :content="item.content" />
      <div v-if="item.picList?.length">
        <el-image
          v-for="(url, index) in item.picList"
          :key="index"
          lazy
          show-progress
          :preview-src-list="item.picList"
          :initial-index="index"
          style="
            width: 100px;
            height: 100px;
            margin-right: 10px;
            display: inline-block;
          "
          :src="url"
          fit="cover"
          class="border-rd-5"
          :preview-teleported="true"
        />
      </div>
      <div class="flex items-center op-text us">
        <span>{{ item.date }}</span>
        <div
          class="ml-20 flex items-center cursor-pointer-text-hover"
          @click="likeReply"
        >
          <i
            class="i-fe:thumbs-up mr-3"
            :class="{ 'bg-primary': item.isLick }"
          />
          <span class="line-height-100%">
            {{ item.likeCount ? formatNumber(item.likeCount) : "点赞" }}
          </span>
        </div>
        <div
          class="ml-20 flex items-center cursor-pointer-text-hover"
          @click="showComment = !showComment"
        >
          <i class="i-fe:message-square mr-3" />
          <span class="line-height-100%">
            {{ showComment ? "取消回复" : "回复" }}
          </span>
        </div>
      </div>

      <div v-if="showComment" class="py-8">
        <Comment :default-placeholder="`回复${item.from.nickName}...`" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.el-avatar {
  width: 30px;
  height: 30px;
}
</style>
